<template>
    <div>
        <h2 class="form-group-label">
        </h2>
        <van-field label="宽度">
            <template #input>
                <van-radio-group v-model="width" direction="horizontal">
                    <van-radio style="margin-bottom: 8px" name="auto">自动</van-radio>
                    <van-radio style="margin-bottom: 8px" name="none">宽度</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field v-if="this.$store.state.selectedComponent.data.style.width !== 'auto'" v-model="oldWidth" label="输入宽度" type="digit">
        </van-field>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                oldWidth : 160
            }
        },
        watch:{
            oldWidth(){
                this.$store.state.selectedComponent.data.style.width = this.oldWidth + 'px';
            },
        },
        computed:{
            width:{
                get(){
                    if(this.$store.state.selectedComponent.data.style.width === 'auto'){
                        return 'auto'
                    }
                    return 'none'
                },
                set(value){
                    if(value === 'auto'){
                        this.$store.state.selectedComponent.data.style.width = 'auto'
                    }else{
                        this.$store.state.selectedComponent.data.style.width = this.oldWidth + 'px';
                    }
                }
            },
        }
    }
</script>
